//获取操作对象
var div1 = document.querySelector('.pagination1');
//获取存放所有内容的盒子
var rowDiv = document.querySelector('.row');
(async function() {
    var data = await PromiseAjax({
            url: './php/list.php'
        })
        //把获取到的数据转为数组对象
    data = eval('(' + data + ')')
        //创建分页器的实例化对象
    new Pagination(div1, {
        pageInfo: {
            pagenum: 1,
            pagesize: 8,
            totalsize: data.length,
            totalpage: Math.ceil(data.length / 8)
        },
        textInfo: {
            first: '首页',
            prev: "上一页",
            next: '下一页',
            last: '尾页'
        },
        cb(m) {
            //获取一页显示的数据
            var ar1 = data.slice((m - 1) * 8, m * 8)
                //创建拼接所有内容的字符串
            var str = ''
                //遍历当前数组中所有数据
            for (let i = 0; i < ar1.length; i++) {
                str += `
                <div class="col-sm-6 col-md-4 col-lg-3">
                    <div class="thumbnail">
                    <ol class="breadcrumb show1">
                        <li><a href="#">${ar1[i].cat_one_id}</a></li>
                        <li><a href="#">${ar1[i].cat_two_id}</a></li>
                        <li class="active">${ar1[i].cat_three_id}</li>
                    </ol>    
                    <img src="${ar1[i].goods_small_logo}">
                    <div class="caption">
                        <h5 class="show1">${ar1[i].goods_name}</h5>
                        <p>￥${ar1[i].goods_price}</p>
                        <p><a href="./buy.html" class="btn btn-primary" role="button">进入购物车</a> <a href="./jd_detail.html?id=${ar1[i].goods_id}" class="btn btn-default" role="button">查看商品详情</a></p>
                    </div>
                    </div>
                </div>
                `
            }
            //把拼接好的内容渲染到页面中
            rowDiv.innerHTML = str
        }
    })
})()